import { EChartsOption } from 'echarts'
import { graphic } from 'echarts'
function useEchartOption() {
    const areaOption: EChartsOption = {
        grid: {
            top: '5%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
        },
        xAxis: {
            type: 'category',
            data: ['中国', '美国', '日本', '中东', '澳大利亚'],
            // axisLine: { onZero: true },
            axisLine: {
                lineStyle: {
                    // color:'#000',
                },
                // onZero:true,
            },
            axisTick: {
                // interval:0
            },
            boundaryGap: true,
        },
        tooltip: {},
        yAxis: {
            type: 'value',
            splitLine: {
                lineStyle: {
                    color: '#434343',
                    opacity: 0.6,
                    // type: 'dashed',
                },
                // interval:200,
                // show: true,
            },
            splitArea: {},
            // axisTick: {
            //     interval:100,
            //     show:true,
            // },
            // interval: 100,
            // axisLabel:{
            //     width:60,
            //     height:30,
            //     fontSize:12,
            // }
        },
        series: [
            {
                data: [
                    150,
                    230,
                    {
                        value: 120,
                        itemStyle: {
                            color: new graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#ffa442' },
                                { offset: 0.5, color: '#ffa44273' },
                                { offset: 1, color: '#ffa44228' },
                            ]),
                        },
                    },
                    218,
                    135,
                ],
                type: 'bar',
                // symbol: 'none',
                // lineStyle: {
                //     width: 1,
                //     type: 'solid',
                //     color: '#38FF06',
                // },
                itemStyle: {
                    color: new graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#42a4ff' },
                        { offset: 0.5, color: '#188ff073' },
                        { offset: 1, color: '#188ff028' },
                    ]),
                },
                emphasis: {
                    itemStyle: {
                        color: new graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#ffa442' },
                            { offset: 0.5, color: '#ffa44273' },
                            { offset: 1, color: '#ffa44228' },
                        ]),
                    },
                },
                // areaStyle: {
                //     color: new graphic.LinearGradient(0, 0, 0, 1, [
                //         {
                //             offset: 1,
                //             color: '#00000000',
                //         },
                //         {
                //             offset: 0,
                //             color: '#38FF06',
                //         },
                //     ]),
                // },
            },
            // {
            //     data: [90, 170, 164, 158, 75, ],
            //     type: 'bar',
            //     symbol: 'none',
            //     lineStyle: {
            //         width: 1,
            //         type: 'solid',
            //         color: '#ff3006',
            //     },
            //     areaStyle: {
            //         color: new graphic.LinearGradient(0, 0, 0, 1, [
            //             {
            //                 offset: 1,
            //                 color: '#00000000',
            //             },
            //             {
            //                 offset: 0,
            //                 color: '#ff3006',
            //             },
            //         ]),
            //     },
            // },
        ],
    }

    const ratioOption: EChartsOption = {
        tooltip: {
            trigger: 'item',
        },
        legend: {
            top: '5%',
            // left: 'center',
            left: '60%',
            right: 'right',
            textStyle: {
                color: '#878787',
                fontSize: 10,
            },
            itemStyle: {},
        },
        grid: [
            {
                // left: '3%',
                // right: '50%',
                // bottom: '3%',
                // containLabel: true,
            },
        ],
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['30%', '90%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center',
                    color: '#434343',
                },
                // itemStyle:{

                // },
                emphasis: {
                    // label: {
                    //     show: true,
                    //     fontSize: 40,
                    //     fontWeight: 'bold',
                    // },
                },
                labelLine: {
                    show: false,
                },
                top: '0%',
                right: '50%',
                data: [
                    { value: 1048, name: 'Search Engine' },
                    { value: 735, name: 'Direct' },
                    { value: 580, name: 'Email' },
                    { value: 484, name: 'Union Ads' },
                    { value: 300, name: 'Video Ads' },
                ],
            },
        ],
    }

    let xAxisData = []

    for (let i = 1; i < 6; i++) {
        xAxisData.push('2023-4-' + i)
        // data1.push(+(Math.random() * 2).toFixed(2));
        // data2.push(+(Math.random() * 5).toFixed(2));
        // data3.push(+(Math.random() + 0.3).toFixed(2));
        // data4.push(+Math.random().toFixed(2));
    }

    const objectUpgradeOption: EChartsOption = {
        legend: {
            top: '0%',
            textStyle: {
                color: '#878787',
            },
        },
        tooltip: {},
        toolbox: {
            show: true,
            // feature: {
            //     mark: { show: true },
            //     dataView: { show: true, readOnly: false },
            //     restore: { show: true },
            //     saveAsImage: { show: true },
            // },
        },
        xAxis: {
            data: xAxisData,
            name: 'X Axis',
            axisLine: { onZero: true },
            splitLine: { show: false },
            splitArea: { show: false },
        },
        grid: [
            {
                top: '12%',
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true,
            },
        ],
        yAxis: {
            splitLine: {
                lineStyle: {
                    color: '#434343',
                    opacity: 0.6,
                },
            },
            interval: 10,
        },
        series: [
            {
                name: '类别1',
                type: 'bar',
                stack: 'one',
                // radius: [50, 250],
                // center: ['50%', '50%'],
                // roseType: 'area',
                // itemStyle: {
                //     borderRadius: 8,
                // },
                color: new graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#42a4ff' },
                    { offset: 0.5, color: '#188ff073' },
                    { offset: 1, color: '#188ff028' },
                ]),
                data: [40, 38, 32, 30, 28],
            },
            {
                name: '类别2',
                type: 'bar',
                stack: 'one',
                // radius: [50, 250],
                // center: ['50%', '50%'],
                // roseType: 'area',
                // itemStyle: {
                //     borderRadius: 8,
                // },
                color: new graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#ffa742' },
                    { offset: 0.5, color: '#ffa742b9' },
                    { offset: 1, color: '#ffa7427f' },
                ]),
                data: [30, 28, 22, 20, 18],
            },
        ],
    }

    const dataCatalogPieOption: EChartsOption = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                // Use axis to trigger tooltip
                type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow'
            },
        },

        legend: {
            textStyle: {
                color: '#878787',
            },
            show: false,
        },
        grid: {
            left: '0%',
            right: '4%',
            bottom: '3%',
            top: '0%',
            containLabel: true,
        },
        xAxis: {
            type: 'value',
            splitLine: {
                lineStyle: {
                    color: '#434343',
                    opacity: 0.6,
                },
                show: true,
            },
        },
        yAxis: {
            type: 'category',
            data: ['遥感影像', '音频', '视频', '文字', '图片'],
        },
        series: [
            {
                name: '现存',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true,
                },
                emphasis: {
                    focus: 'series',
                },
                data: [320, 302, 301, 334, 390],
                color: new graphic.LinearGradient(1, 0, 0, 0, [
                    { offset: 0, color: '#42a4ff' },
                    { offset: 0.5, color: '#188ff073' },
                    { offset: 1, color: '#188ff028' },
                ]),
            },
            {
                name: '增加',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true,
                },
                emphasis: {
                    focus: 'series',
                },
                data: [50, 62, 31, 64, 20],
                color: new graphic.LinearGradient(1, 0, 0, 0, [
                    { offset: 0, color: '#9cff1a' },
                    { offset: 0.5, color: '#9cff1a9f' },
                    { offset: 1, color: '#9cff1a8a' },
                ]),
            },
        ],
    }

    const dataCatalogLineOption: EChartsOption = {
        backgroundColor: '#2c343c',
        title: {
            text: 'Customized Pie',
            left: 'center',
            top: 20,
            textStyle: {
                color: '#ccc',
            },
        },
        tooltip: {
            trigger: 'item',
        },
        visualMap: {
            show: false,
            min: 80,
            max: 600,
            inRange: {
                colorLightness: [0, 1],
            },
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: '55%',
                center: ['50%', '50%'],
                data: [
                    { value: 335, name: 'Direct' },
                    { value: 310, name: 'Email' },
                    { value: 274, name: 'Union Ads' },
                    { value: 235, name: 'Video Ads' },
                    { value: 400, name: 'Search Engine' },
                ].sort(function (a, b) {
                    return a.value - b.value
                }),
                roseType: 'radius',
                label: {
                    color: 'rgba(255, 255, 255, 0.3)',
                },
                labelLine: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.3)',
                    },
                    smooth: 0.2,
                    length: 10,
                    length2: 20,
                },
                itemStyle: {
                    color: '#c23531',
                    shadowBlur: 200,
                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                },
                animationType: 'scale',
                animationEasing: 'elasticOut',
                animationDelay: function (idx) {
                    return Math.random() * 200
                },
            },
        ],
    }

    const objectMutationDetectOption: EChartsOption = {
        // title: {
        //     text: 'Stacked Area Chart',
        // },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985',
                },
            },
        },
        legend: {
            data: ['遥感影像数据', '三维模型'],
            textStyle: {
                color: '#878787',
            },
        },
        toolbox: {
            // feature: {
            //     saveAsImage: {},
            // },
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data: [
                    '2023-05-01',
                    '2023-05-02',
                    '2023-05-03',
                    '2023-05-05',
                    '2023-05-06',
                    '2023-05-07',
                    '2023-05-08',
                ],
            },
        ],
        yAxis: [
            {
                type: 'value',
                axisTick: {
                    interval: 100,
                    show: true,
                },
                interval: 50,
                splitLine: {
                    lineStyle: {
                        color: '#434343',
                        opacity: 0.6,
                    },
                },
            },
        ],
        series: [
            {
                name: '遥感影像数据',
                type: 'line',
                // stack: 'Total',
                emphasis: {
                    focus: 'series',
                },
                symbol: 'none',
                lineStyle: {
                    width: 1,
                    type: 'solid',
                    color: '#38FF06',
                },
                areaStyle: {
                    color: new graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 1,
                            color: '#00000000',
                        },
                        {
                            offset: 0,
                            color: '#38FF06',
                        },
                    ]),
                },
                data: [120, 132, 101, 134, 90, 230, 210],
            },
            {
                name: '三维模型',
                type: 'line',
                // stack: 'Total',
                emphasis: {
                    focus: 'series',
                },
                lineStyle: {
                    width: 1,
                    type: 'solid',
                    color: '#ff3006',
                },
                symbol: 'none',
                areaStyle: {
                    color: new graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 1,
                            color: '#00000000',
                        },
                        {
                            offset: 0,
                            color: '#ff3006',
                        },
                    ]),
                },
                data: [220, 182, 191, 234, 290, 330, 310],
            },
        ],
    }

    return {
        areaOption,
        ratioOption,
        objectUpgradeOption,
        dataCatalogPieOption,
        dataCatalogLineOption,
        objectMutationDetectOption,
    }
}

export default useEchartOption
